<template>
  <NuxtLayout name="list">
    <Head>
      <Title>首页 - 国内领先的企业智能信息化IT解决方案提供商</Title>
      <Meta name="description" content="管理页面" />
    </Head>
    <template #sidebar>
      <NewsSideBarCategory :data="state.category" />
    </template>
    <div class="app-detail app-news-detail">
      <div class="title">
        <h3>{{ state.data.title }}</h3>
      </div>
      <div class="meta flex justify-between mb-6 pt-3">
        <div class="author">
          <el-icon><i-ep-user /></el-icon>
          {{ state.data.author }}
        </div>
        <div class="time">
          <el-icon><i-ep-Clock /></el-icon>
          {{ state.data.create_time }}
        </div>
      </div>
      <div v-dompurify-html="state.data.content" v-loading="loading" class="content" />
    </div>
  </NuxtLayout>
</template>
<script setup lang="ts">
import { useArticleDetail } from '~/api'

const route = useRoute()
const loading = ref(true)
const state = reactive<any>({
  data: {},
  category: [],
})

// 获取文章
const getData = async () => {
  const { data: res }: any = await useAsyncData(`use_ArticleDetail`, () => useArticleDetail({ id: route.params.id }))
  const data = res.value.data

  state.data = data.rows

  loading.value = false
}

getData()

// 获取文章
const getCategory = async () => {
  const { data: res }: any = await useAsyncData(`use_Category`, () => useCategory())

  const rows = res.value.data?.rows
  const current = rows.find((item: any) => item.model === 'News' && !item.colPid)

  state.category = current ? rows.filter((item: any) => item.colPid === current.id) : []
}

getCategory()
</script>
<style></style>
